<template>
  <div class="completeInfo">
    <section class="header clearfix">
      <i class="iconfont iconfanhui1" @click="goBack()"></i>
      <span @click="goBack()">信息补全列表</span>
    </section>
    <div class="search-box" @keyup.enter="searchFun">
      <i class="iconfont iconsearch1"></i>
      <el-input placeholder="输入员工姓名进行搜索" class="search" v-model="name"></el-input>
    </div>
    <div class="table">
      <el-table :data="tableData" tooltip-effect="dark" v-loading="loading" style="width: 100%">
        <el-table-column prop="name" sortable label="姓名" ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="go(scope.$index, scope.row)">补全</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
       
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="current"
        :page-sizes="[6,12, 24, 36]"
        :page-size="pageSize"
        layout="sizes, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { requestApiPost } from "../api/api";
import { reqRep } from "../report/reqReport";
import { resRep } from "../report/resReport";
export default {
  name: "completeInfo",
  data() {
    return {
      loading: true,
      isSelect: false,
      isNumber: 0,
      name: "",
      tableData: [],
      current: 1,
      pageSize: 6,
      total: null
    };
  },
  methods: {
    handleCurrentChange(e) {
      this.current = e;
      this.getData();
    },
    handleSizeChange(e) {
      this.pageSize = e;
      this.getData();
    },
    go(i, obj) {
      sessionStorage.setItem("userId", obj.id);
      sessionStorage.setItem("username", obj.name);
      setTimeout(() => {
        this.$router.push("completeInfoDetail");
      }, 500);
    },
    goBack() {
      this.$router.push("homePage");
    },
    searchFun() {
      this.current = 1;
      this.getData();
    },
    getData() {
      this.loading = true;
      this.tableData = [];
      base
        .getAjax("/user/unCompletionUserInfoList", {
          companyId: JSON.parse(sessionStorage.getItem("login")).companyId,
          name: this.name,
          pageNum: this.current,
          pageSize: this.pageSize
        })
        .then(res => {
          this.loading = false;
          if (res.data.code == 1) {
            this.total = parseInt(resReport.data.total);
            this.tableData = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        });
    },
    isClick(num) {
      this.isNumber = num;
    }
  },
  created() {
    this.getData();
  }
};
</script>
<style scoped>
.header {
  padding: 15px;
  height: 50px;
  box-sizing: border-box;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.header i {
  cursor: pointer;
  margin-right: 5px;
}
.header span {
  cursor: pointer;
}
.active {
  background-color: #eee;
  border-radius: 4px;
}
.search-box {
  height: 50px;
  line-height: 50px;
}
.search-box i {
  margin-left: 15px;
  vertical-align: middle;
}
.search-box .search {
  display: inline-block;
  width: calc(100% - 36px);
}
.search-box .option {
  display: inline-block;
  margin-left: 15px;
}
i {
  font-size: 16px;
  color: #999;
}
</style>
